建设舒适的浏览体验，设计可以做什么？

在这内容为王的时代，海量的图文资讯信息充斥在我们的碎片化时间中，有驾作为百度生态体系内的汽车信息服务平台，内容建设尤为重要。那么设计有哪些手段为内容建设助力呢？接下来，我们依据阅读体验升级的设计经验，从目标拆解、痛点分析、设计打法等维度来分享设计思路。

设计目标

通过现状分析发现，对于业务而言，产品发展到了深耕细节体验阶段，建设一个舒适的内容浏览体验，成为当前重要设计目标。设计可从痛点分析、设计打法、指标验证这3大步骤逐一击破。

痛点分析

口碑详情作为有驾最典型的内容场景，初步搭建上线后，长期未更新优化，阅读体验不佳，影响用户的阅读效率和舒适度。阅读体验较好的竞品，用户则能够流畅的阅读整篇文章。经过现状的梳理分析发现，口碑详情问题集中表现为信息密集浏览易疲劳、元素干扰浏览易中断、结构混乱浏览不连贯。

设计打法

针对设计目标和用户痛点，逐步拆解、梳理、发散，循序渐进的推导出口碑详情页的设计方案，沉淀经验，横向赋能全部内容性场景的阅读体验升级。

一、痛点拆解，定位影响因素

如何打造舒适的内容浏览体验？首先是剖析问题现状，找准痛点影响因素，依据分析，助力设计方案探索。

1、痛点拆解

阅读体验影响元素可拆解为行距、字号、段距、ICON等11个元素，这些元素相互关联相互影响，侧重不同。依据痛点方向可梳理为文本、图形、结构3种类型。

2、优先级定位

在众多元素中，哪些重要哪些不重要，决定后续设计方向。眼动实验结论表明 “行距比字号对文字排版影响更大”。在眼动数据中，受到行距变化的影响较为明显，而字号的变化对用户的眼动影响较小。那么，针对行距的设计探索将成为后续的重点研究方向。

二、方案探索，构建沉浸阅读体验

1、文本信息层次调优，打造舒适的浏览动线

面对文本信息密集导致浏览易疲劳的问题。我们选取了7款主流的内容型产品，针对字号行距、字重段距按照四个象限划分。发现内容型产品的文本信息排版节奏（规律）主要集中在B象限，即图文详情字号57px，字重常规，行距1.7倍，段距集中在2.7—3.3倍。可初步判断，在此区间的信息层次阅读体验较好。

2、视觉降噪，建立专注的浏览环境

面对图形信息设计语言不一致导致浏览受到干扰的问题。通过元素整理收敛，统一ICON风格、文字颜色、删减表情和符号元素，建立统一的视觉语言。

3、结构收敛，结合轻运营设计，营造流畅的浏览视效

面对版式结构混乱导致浏览不连贯的问题。经过结构整理收敛，统一段落标题样式、去掉段落缩进、去掉标题。融入亮点设计方案，结合轻运营设计和评分数据，吸引用户浏览。

三、方案产出，经用户调研筛选最终方案

为了初步验证方案的合理性，设计依据三个方向产出设计方案，通过用户采访，验证最符合目标的设计方案。

降噪+结构收敛方案：降噪+结构收敛方案浏览更顺畅，完成浏览速度更快。

字号方案：字号54px、行距1.7倍方案，完读率最高，用户反馈浏览更舒适。

段间距方案：段间距2.9倍时，浏览中断最少。

四、场景拓展，横向赋能

1、口碑详情，上线后数据实现超预期涨幅，具备横向赋能价值

单篇口碑人均消费时长：+102.9%  人均完读率：+78.4%，数据实现超预期大幅增长，表明阅读体验升级设计方案有一定的助力作用，具备横向拓展赋能的价值。

2、横向拓展全内容场景，数据均正向增长

复利APP口碑详情的成功经验，横向赋能APP及小程序端各内容场景，数据均正向增长，助力多场景阅读体验的提升。

本次的阅读体验升级设计方案，通过对全局思考和细节深耕，使用信息层次调优、视觉降噪、结构收敛等设计手段，打造舒适的浏览视觉动线、建立专注连贯的浏览环境，横向赋能全内容场景，提升阅读体验，助力内容场景建设。

写在最后

我们对内容场景的设计还在不断的探索和实践。伴随着时代发展变化，用户需求和行为习惯也在转变，对于体验设计而言，必须保持敏感度，用设计给用户带来更舒适、更高效的使用体验。

感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。

也欢迎加入MEUX,视觉/交互/运营设计师

可投简历至[e-mail]

(注明信息获取来源如：公众号）

以下文章，你可能也感兴趣

⬇️